﻿@page
@{ Layout = "_Layout"; }

<el-table
:data="tokens"
style="width: 100%">
<el-table-column prop="title" label="名称" width="150"></el-table-column>
<el-table-column label="关联管理员">
  <template slot-scope="scope">
    <el-link :underline="false" type="primary" v-on:click="btnAdminViewClick(scope.row)">{{scope.row.adminName}}</el-link>
  </template>
</el-table-column>
<el-table-column label="授权范围">
  <template slot-scope="scope">
    {{ getItemScopes(scope.row) }}
  </template>
</el-table-column>
<el-table-column
  fixed="right"
  width="190"
  align="center"
  show-overflow-tooltip
  label="操作">
  <template slot-scope="scope">
    <el-link :underline="false" style="margin-right: 5px;" type="primary" v-on:click="btnViewClick(scope.row)">
      获取密钥
    </el-link>
    <el-link :underline="false" style="margin-right: 5px;" type="primary" v-on:click="btnEditClick(scope.row)">
      编 辑
    </el-link>
    <el-link :underline="false" style="margin-right: 5px;" type="primary" v-on:click="btnDeleteClick(scope.row)">
      删 除
    </el-link>
  </template>
</el-table-column>
</el-table>

<el-row>
  <el-divider></el-divider>
  <div style="height: 10px"></div>
  <el-button size="mini" plain type="primary" style="margin-left: 0px;" icon="el-icon-plus" v-on:click="btnAddClick">
    添加新密钥
  </el-button>
  <el-link style="float: right" :underline="false" type="primary" :href="getDocsUrl('api/')" target="_blank">
    SiteServer REST API
  </el-link>
</el-row>

<el-drawer
  id="form"
  :title="form.id ? '修改API密钥' : '添加API密钥'"
  ref="panel"
  :visible.sync="panel"
  destroy-on-close
  direction="rtl"
  size="70%">
  <div class="drawer__content">
    <el-form ref="form" :model="form" size="small" label-width="120px">
      <el-form-item label="名称" prop="title" :rules="{ required: true, message: '请输入名称' }">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="关联管理员" prop="adminName" :rules="{ required: true, message: '请选择关联管理员' }">
        <el-select v-model="form.adminName" size="mini" placeholder="请选择关联管理员">
          <el-option v-for="adminName in adminNames" :key="adminName" :label="adminName" :value="adminName"></el-option>
        </el-select>
        <div class="tips">
          关联管理员定义API密钥的访问权限，API密钥的访问权限将被限制在此管理员的权限范围内
          <el-link :underline="false" style="font-size: 12px;" type="primary" :href="getDocsUrl('api/')" target="_blank">阅读更多</el-link>
        </div>
      </el-form-item>
      <el-form-item label="授权范围" prop="scopes" :rules="{ required: true, message: '请选择授权范围' }">

        <el-checkbox-group v-model="form.scopes">
          <el-checkbox v-for="scope in scopes" :key="scope" :label="scope"></el-checkbox>
        </el-checkbox-group>

        <div class="tips">
          授权范围定义API密钥可访问的API地址，API密钥能够访问的API地址将被限制在授权范围内
          <el-link :underline="false" style="font-size: 12px;" type="primary" :href="getDocsUrl('api/')" target="_blank">阅读更多</el-link>
        </div>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/administratorsAccessTokens.js" type="text/javascript"></script> }